<style>
    .deploy-window .right-arrow {
        width: 0;
        height: 0;
        border-width: 10px;
        border-style: solid;
        border-color: transparent transparent #0099CC transparent;
        transform: rotate(90deg);
        display: inline-block;
        vertical-align: middle;
        margin: 0 0 0 10px;
    }

    .deploy-window .btn-area {
        position: relative;
        text-align: center;
        padding: 10px 0;
    }

    .deploy-window {
        width: 100%;
        height: 100%;
    }

    .deploy-window .layui-row,
    .deploy-window .layui-col-md12,
    .deploy-window .layui-card {
        height: 100%;
    }

    .deploy-window .log-console {
        height: calc(100% - 93px);
        padding: 10px 10px 10px 10px;
        background: #525050;
        color: #f1f4f5;
        counter-reset: step;
        counter-increment: step 0;
        overflow: auto;
    }

    .deploy-window .log-console p {
        white-space: nowrap;
    }

</style>
<div class="deploy-window layui-container">
    <div class="layui-row">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header btn-area">
                    <a class="layui-btn layui-btn-normal oper_generate">生成代码</a>
                    <span class="right-arrow"></span>
                    <a class="layui-btn layui-btn-normal oper_compile">编译代码</a>
                    <!-- <a class="layui-btn #(hasStartedWeb?'':'layui-btn-normal') oper_test">#(hasStartedWeb?'停止测试WEB':'启动测试WEB')</a> -->
                    <span class="right-arrow"></span>
                    <a class="layui-btn layui-btn-normal oper_deploy">部署本机</a>
<!--                    <a class="layui-btn layui-btn-primary oper_open_web">打开WEB预览</a>-->
                    <a class="layui-btn layui-btn-primary oper_preview">预览代码</a>
                    <a class="layui-btn layui-btn-primary oper_log_clean">清空日志</a>
                </div>
                <div class="layui-card-body log-console">
                </div>
            </div>
        </div>
    </div>
</div>
<!-- @formatter:off -->
<script>
    layui.use("form",function(){
        var $ = layui.$;
        var hasStartedWeb = #(hasStartedWeb?'true':'false')
        // 启动websocket
        function startWebSocket() {
            if(!window.logSocket){
                if ("WebSocket" in window) {
                    console.log("您的浏览器支持 WebSocket!");
                    let wsUrl = "ws://" + window.location.host + "/log.ws";
                    window.logSocket = new WebSocket(wsUrl);
                } else {
                    // 浏览器不支持 WebSocket
                    console.log("您的浏览器不支持 WebSocket!");
                }
            }
            if(window.logSocket){
                window.logSocket.onopen = function() {
                    // window.logSocket.send("log")
                    console.log("Log WebSocket 已连接！");
                };
                window.logSocket.onmessage = function (evt) {
                    var received_msg = evt.data;
                    console.log("Log WebSocket 接收到数据！", evt);
                    log(evt.data);
                };
                window.logSocket.onclose = function() {
                    window.logSocket = null;
                    console.log("Log WebSocket 连接已关闭！");
                };
            }
        }

        function log(content){
            let lines = content.split(/\n/g);
            lines.forEach(function(line){
                let p = $('<p></p>');
                if(line.indexOf('\t')==0){
                    p.css("text-indent","2em");
                }
                p.text(line);
                $('.log-console').append(p)
                $(".log-console p:last-child")[0].scrollIntoView();
            })
        }

        startWebSocket()
        $('.oper_log_clean').click(function(){
            $('.log-console').html("");
        })
        $('.oper_preview').click(function(){
            layui.$.post('/generator/table/preview', {table_id: '#(tableModel.table_id)'}, function (str) {
                layer.open({
                    type: 1,
                    title: '代码生成预览',
                    maxmin: true,
                    area: ['80%', '80%'],
                    content: str,
                })
            });
        });
        $('.oper_generate').click(function(){
            $.ajax({
                url: '/generator/table/generateCode',
                data: {
                    table_id: '#(tableModel.table_id)'
                },
                traditional: true,
                type: 'POST',
                success: function (result) {
                    if (result.success) {
                        log("代码生成成功！")
                    } else {
                        log("代码生成失败！"+ (result.message?result.message:"未知错误"))
                    }
                }
            })
        })
        $('.oper_deploy').click(function(){
            layer.confirm('确定要部署源码与编译文件到本地服务器？<br>部署前请先测试代码，避免部署有编译的问题的代码到开发环境！',
                {
                    icon: 3, title: '部署代码提示', btn: ['确认', '取消']
                },
                function (index) {
                    $.ajax({
                        url: '/generator/table/deploy',
                        data: {
                            table_id: '#(tableModel.table_id)'
                        },
                        traditional: true,
                        type: 'POST',
                        success: function (result) {
                            if (result.success) {
                                log('部署成功！可以重启本地服务器查看！如果是开发环境，源码已部署到对应包路径下！');
                            } else {
                                log('部署失败！' + (result.message?result.message:"未知错误"));
                            }
                        },
                        complete: function(){
                            layer.close(index)
                        }
                    })
                }
            )


        })
        $('.oper_compile').click(function(){
            $.ajax({
                url: '/generator/table/compile',
                data: {
                    table_id: '#(tableModel.table_id)'
                },
                traditional: true,
                type: 'POST',
                success: function (result) {
                    if (result.success) {
                    } else {
                        log('编译失败！' + (result.message?result.message:"未知错误"));
                    }
                }
            })
        })
        let operTestWeb = function(){
            let that = this;
            let url = hasStartedWeb?'/generator/table/stopWeb':'/generator/table/startWeb'
            $.ajax({
                url: url,
                data: {
                    table_id: '#(tableModel.table_id)',
                    port: -1,
                },
                traditional: true,
                type: 'POST',
                beforeSend: function(){
                    $('.oper_test').addClass('layui-btn-disabled');
                    $('.oper_test').unbind('click')
                },
                success: function (result) {
                    if (result.success) {
                        // log('请求成功！');
                        log(result.message);
                        hasStartedWeb = !hasStartedWeb;
                        $('.oper_test').text(hasStartedWeb?'停止测试WEB':'启动测试WEB');
                        $('.oper_test').toggleClass("layui-btn-normal");
                        window.test_port = result.port;
                    } else {
                        log('启动失败！' + (result.message?result.message:"未知错误"));
                    }
                },
                complete: function(){
                    $('.oper_test').removeClass("layui-btn-disabled");
                    $('.oper_test').bind('click', operTestWeb)
                }
            })
        };
        $('.oper_test').bind('click', operTestWeb)
        $('.oper_open_web').click(function(){
            window.open(location.protocol+'//'+location.hostname + ":"+ window.test_port, "");
        })
    })
</script>
<!-- @formatter:on -->